<!-- 出入库明细 -->
<template>
  <div style="overflow: auto;box-shadow: 0px 4px 8px 0px rgba(108, 137, 165, 0.18);">
    <cus-card :showTitle="false" style="min-width: 924px;">
      <Tabs
        :value="tabsValue"
        @on-click="tabsValueChange($event)"
        style="padding-top: 16px; min-width: 880px"
      >
        <Tab-pane label="入库流水" name="nameOne">
          <div class="topBody">
            <div class="topBodyItem">
              <span class="itemSpan">物资名称</span>
              <Input
                v-model="formOne.productName"
                class="itemImport flex"
                clearable
                placeholder="请输入物资名称"
                maxlength="15"
              ></Input>
            </div>
            <div class="topBodyItem">
              <span class="itemSpan">物资编码</span>
              <Input
                v-model="formOne.goodsCode"
                class="itemImport flex"
                clearable
                placeholder="请输入物资编码"
                maxlength="15"
              ></Input>
            </div>
            <div class="topBodyItem">
              <span class="itemSpan">验收时间</span>
              <DatePicker
                class="itemImport"
                type="daterange"
                v-model="dateStr"
                placeholder="开始日期 - 结束日期"
                @on-change="daterangeOneChange"
                style="width: 200px"
              />
            </div>
            <div class="topBodyItem">
              <span class="itemSpan">供应商</span>
              <Select
                v-model="formOne.supplyId"
                clearable
                placeholder="请选择供应商"
                @on-change="selectStockBillEntityListApi()"
                class="itemImport"
              >
                <Option
                  v-for="item in supplyTree"
                  :value="item.id"
                  :key="item.id"
                  >{{ item.name }}</Option
                >
              </Select>
            </div>
            <div class="topBodyItem">
              <span class="itemSpan">入库单号</span>
              <Input
                v-model="formOne.billNo"
                class="itemImport flex"
                clearable
                placeholder="请输入入库单号"
                maxlength="25"
                style="width: 280px"
              ></Input>
            </div>
            <div class="topBodyItem">
              <span class="itemSpan">验收员</span>
              <Input
                v-model="formOne.inspectorName"
                class="itemImport flex"
                clearable
                placeholder="请输入验收员"
                maxlength="15"
              ></Input>
            </div>
            <div class="topBodyItem">
              <span class="itemSpan">入库方式</span>
              <Select
                v-model="formOne.storageway"
                clearable
                placeholder="请选择入库方式"
                @on-change="
                  pagesOne.page = 1;
                  selectStockBillEntityListApi();
                "
                class="itemImport"
              >
                <Option
                  v-for="item in storagewayTree"
                  :value="item.code"
                  :key="item.code"
                  >{{ item.desc }}</Option
                >
              </Select>
            </div>
            <div class="topBodyItem">
              <span class="itemSpan">存储仓库</span>
              <Select
                placeholder="请选择存储仓库"
                clearable
                @on-change="selectStockBillEntityListApi()"
                v-model="formOne.stockId"
                style="width: 200px"
              >
                <Option
                  v-for="item in storehouseTree"
                  :value="item.id"
                  :key="item.id"
                  >{{ item.name }}</Option
                >
              </Select>
            </div>
            <div class="topBodyItem">
              <cus-Button
                class="ml_48 mr_20"
                type="primary"
                @onClick="selectStockBillEntityListApi()"
                >查询</cus-Button
              >
              <cus-Button type="primary" @onClick="resetOne()" class="mr_20"
                >重置</cus-Button
              >
              <cus-Button type="primary" @onClick="onExportOne()"
                >导出</cus-Button
              >
            </div>
          </div>
          <cusTable
            border
            :loading="formOne.loading"
            :columns="columnsOne"
            :data="dataOne"
            :size="vuex_config.tableSize"
            :bottomClass="['cus-page']"
          >
            <template slot-scope="{ row }" slot="imageOperation">
              <div style="display: flex; justify-content: center">
                <div
                  @click="onShow(row)"
                  v-if="row.image"
                  style="height: 40px; width: 80px"
                >
                  <img
                    :src="row.image"
                    alt=""
                    style="height: 100%; width: 100%"
                  />
                </div>
              </div>
            </template>
          </cusTable>
          <div class=" cus_page">
            <cus-page
              :data="pagesOne"
              class="mt_10"
              @pageChange="selectStockBillEntityListApi()"
            ></cus-page>
          </div>
        </Tab-pane>
        <Tab-pane label="出库流水" name="nameTwo">
          <div class="topBody">
            <div class="topBodyItem">
              <span class="itemSpan">物资名称</span>
              <Input
                v-model="formTwo.productName"
                class="itemImport flex"
                clearable
                placeholder="请输入物资名称"
                maxlength="15"
              ></Input>
            </div>
            <div class="topBodyItem">
              <span class="itemSpan">物资编码</span>
              <Input
                v-model="formTwo.goodsCode"
                class="itemImport flex"
                clearable
                placeholder="请输入物资编码"
                maxlength="15"
              ></Input>
            </div>
            <div class="topBodyItem">
              <span class="itemSpan">出库日期</span>
              <DatePicker
                class="itemImport"
                type="daterange"
                v-model="dateStr"
                placeholder="开始日期 - 结束日期"
                @on-change="daterangeTwoChange"
                style="width: 200px"
              />
            </div>
            <!-- <div class="topBodyItem">
              <span class="itemSpan">供应商</span>
              <Select
                v-model="formTwo.supplyId"
                clearable
                placeholder="请选择供应商"
                class="itemImport"
              >
                <Option
                  v-for="item in supplyTree"
                  :value="item.id"
                  :key="item.id"
                  >{{ item.name }}</Option
                >
              </Select>
            </div> -->
            <div class="topBodyItem">
              <span class="itemSpan">出库单号</span>
              <Input
                class="itemImport flex"
                clearable
                v-model="formTwo.billNo"
                placeholder="请输入出库单号"
                maxlength="20"
                style="width:280px"
              ></Input>
            </div>
            <div class="topBodyItem">
              <span class="itemSpan">领取单位</span>
              <Input
                class="itemImport flex"
                clearable
                v-model="formTwo.recipientDepartmentName"
                placeholder="请输入领取单位"
                maxlength="20"
              ></Input>
            </div>
            <div class="topBodyItem">
              <span class="itemSpan">出库方式</span>
              <Select
                v-model="formTwo.storageway"
                clearable
                placeholder="请选择业务类型"
                @on-change="selectGetOutStockBillEntityListApi()"
                class="itemImport"
              >
              <Option
                v-for="item in storagewayOutTree"
                :value="item.code"
                :key="item.code"
                >{{ item.desc }}</Option
              >
              </Select>
            </div>
            <div class="topBodyItem">
              <span class="itemSpan">存储仓库</span>
              <Select
                placeholder="请选择存储仓库"
                clearable
                v-model="formTwo.stockId"
                style="width: 200px"
              >
                <Option
                  v-for="item in storehouseTree"
                  :value="item.id"
                  :key="item.id"
                  >{{ item.name }}</Option
                >
              </Select>
            </div>
            <div class="topBodyItem">
              <cus-Button
                class="ml_48 mr_20"
                type="primary"
                @onClick="
                  pagesTwo.page = 1;
                  selectGetOutStockBillEntityListApi();
                "
                >查询</cus-Button
              >
              <cus-Button type="primary" @onClick="resetTwo()" class="mr_20"
                >重置</cus-Button
              >
              <cus-Button type="primary" @onClick="onTwoExport()"
                >导出</cus-Button
              >
            </div>
          </div>
          <cusTable
            border
            :loading="formTwo.loading"
            :columns="columnsTwo"
            :data="dataTwo"
            :size="vuex_config.tableSize"
            :bottomClass="['cus-page']"
          >
            <template slot-scope="{ row }" slot="imageOperation">
              <div style="display: flex; justify-content: center">
                <div
                  @click="onShow(row)"
                  v-if="row.image"
                  style="height: 40px; width: 80px"
                >
                  <img
                    :src="row.image"
                    alt=""
                    style="height: 100%; width: 100%"
                  />
                </div>
              </div>
            </template>
          </cusTable>
          <div class="cus_page">
            <cus-page
              :data="pagesTwo"
              class="mt_10"
              @pageChange="selectGetOutStockBillEntityListApi()"
            ></cus-page>
          </div>
        </Tab-pane>
      </Tabs>
    </cus-card>
    <!--查看图片-->
    <Modal v-model="showModal" width="800" title="查看图片">
      <div>
        <img
          :src="coursePic"
          v-if="coursePic"
          alt=""
          style="height: 100%; width: 100%"
        />
        <div v-else style="text-align: center">暂无图片</div>
      </div>
      <div slot="footer">
        <slot name="footer"> </slot>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  selectGetOutStockBillEntityList,
  postApiGoodsGeneratePoStockbillIportExcel,
  getApiGoodsHandaworkSuppliername,
  getBasstockList,
  selectStockBillEntityList,
  selectStockBillExportEntityList,
  getOutStockBillEntityList,
  getOutStorageWays,
  getInStorageWays,
} from "@/api/business/manager";
import moment from "moment";
import axios from 'axios'
// require 方式
require("moment/locale/zh-cn");
moment.locale("zh-cn", {
  week: {
    dow: 1
  }
});
// import 方式
import "moment/locale/zh-cn";
moment.locale("zh-cn");



export default {
  components: {},
  data() {
    return {
      tabsValue: "nameOne",
      // 入库查询--------------------
      formOne: {
        productName: "", // 物资名称
        goodsCode: "", //物资编码
        loading: false,
        startDate: "", // 开始时间
        stopDate: "", // 结束时间
        supplyId: "", // 供应商
        billNo: "", // 订单编号
        storageway: "", // 入库方式
        inspectorName: "", // 验收员
        stockId: "" // 仓库id
      },
      storagewayTree: [], // 入库方式select数据
      storehouseTree: [], // 库存方式Tree数据
      dataOne: [], // 入库查询-表格列表
      // 入库查询-表头
      columnsOne: [
        {
          title: "序号",
          type: "index",
          align: "center",
          minWidth: 70
        },
        {
          title: "物资编码",
          key: "goodsCode",
          align: "center",
          minWidth: 125
        },
        {
          title: "物资种类",
          key: "goodsTypeName",
          align: "center",
          minWidth: 100
        },
        {
          title: "物资名称",
          key: "productName",
          align: "center",
          minWidth: 100
        },
        {
          title: "计量单位",
          key: "packagingUtil",
          align: "center",
          minWidth: 80
        },
        {
          title: "入库数量",
          key: "packagingQty",
          align: "center",
          minWidth: 95
        },
        {
          title: "单位重量(Kg)",
          key: "unitWeight",
          align: "center",
          minWidth: 95
        },
        // {
        //   title: "入库重量",
        //   key: "weight",
        //   align: "center",
        //   minWidth: 95
        // },
        {
          title: "存储仓库",
          key: "stockName",
          align: "center",
          minWidth: 100
        },
        {
          title: "供应商",
          key: "supplierName",
          align: "center",
          minWidth: 100
        },
        {
          title: "验收员",
          key: "inspectorName",
          align: "center",
          minWidth: 100
        },
        {
          title: "验收时间",
          key: "createTime",
          align: "center",
          minWidth: 175
        },
        // {
        //   title: "入库凭证",
        //   slot: "imageOperation",
        //   align: "center",
        //   minWidth: 100,
        // },
        {
          title: "入库单号",
          key: "interId",
          align: "center",
          minWidth: 135
        }
        // {
        //   title: "备注",
        //   key: "remark",
        //   align: "center",
        //   minWidth: 100,
        // },
      ],
      // 入库查询-分页
      pagesOne: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      },
      // 出库查询--------------------
      formTwo: {
        loading: false,
        startDate: "", // 开始时间
        stopDate: "", // 结束时间
        productName: "", // 物资名称
        goodsCode: "", //物资编码
        recipientDepartmentName: "", // 领用单位
        billNo: "", // 领用单号
        supplyId: "", // 供应商
        storageway: "", // 出库方式
        stockId: "" // 存储仓库id
      },
      dataTwo: [], // 出库查询-表格列表
      // 出库查询-表头
      columnsTwo: [
        {
          title: "序号",
          type: "index",
          align: "center",
          minWidth: 70
        },
        {
          title: "物资编码",
          key: "goodsCode",
          align: "center",
          minWidth: 145
        },
        {
          title: "物资种类",
          key: "goodsTypeName",
          align: "center",
          minWidth: 100
        },
        {
          title: "物资名称",
          key: "productName",
          align: "center",
          minWidth: 100
        },
        {
          title: "计量单位",
          key: "packagingUtil",
          align: "center",
          minWidth: 100
        },

        {
          title: "出库数量",
          key: "packagingQty",
          align: "center",
          minWidth: 100
        },
        {
          title: "单位重量(Kg)",
          key: "unitWeight",
          align: "center",
          minWidth: 100
        },
        // {
        //   title: "出库重量",
        //   key: "weight",
        //   align: "center",
        //   minWidth: 100
        // },
        {
          title: "存储仓库",
          key: "stockName",
          align: "center",
          minWidth: 100
        },
        // {
        //   title: "供应商",
        //   key: "supplierName",
        //   align: "center",
        //   minWidth: 100
        // },
        {
          title: "领取单位",
          key: "recipientDepartmentName",
          align: "center",
          minWidth: 100
        },
        {
          title: "出库时间",
          key: "createTime",
          align: "center",
          minWidth: 100
        },
        // {
        //   title: "出库凭证",
        //   slot: "imageOperation",
        //   align: "center",
        //   minWidth: 100,
        // },
        {
          title: "出库单号",
          key: "interId",
          align: "center",
          minWidth: 100
        }
        // {
        //   title: "备注",
        //   key: "",
        //   align: "center",
        //   minWidth: 100,
        // },
      ],
      storagewayOutTree: [], // 出库方式select数据
      supplyTree: [], // 供应商数据
      // 出库查询-分页
      pagesTwo: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      },
      dateStr: [], // 默认展示时间
      coursePic: null, // 图片
      showModal: false
    };
  },
  mounted() {
    this.getInStorageWaysApi()
    this.getCurrentWeek();
    this.getBasstockListApi();
    this.getApiGoodsHandaworkSuppliernameApi();
    this.selectStockBillEntityListApi();
    this.getOutStorageWaysApi();
    this.$Message.config({
      top: 50,
      duration: 3
    });
  },
  // 销毁函数时提示变回1.5秒消失
  beforeDestroy() {
    this.$Message.config({
      top: 50,
      duration: 1.5
    });
  },
  activated() {},
  methods: {
    // 重置入库查询搜索
    resetOne() {
      this.formOne.productName = "";
      this.formOne.goodsCode = "";
      this.formOne.loading = false;
      this.formOne.supplyId = "";
      this.formOne.billNo = "";
      this.formOne.storageway = "";
      this.formOne.inspectorName = "";
      this.formOne.stockId = "";
      this.getCurrentWeek();
      this.selectStockBillEntityListApi();
    },
    // 重置出库查询搜索
    resetTwo() {
      this.formTwo.loading = false;
      this.formTwo.productName = "";
      this.formTwo.goodsCode = "";
      this.formTwo.recipientDepartmentName = "";
      this.formTwo.billNo = "";
      this.formTwo.supplyId = "";
      this.formTwo.storageway = "";
      this.formTwo.stockId = "";
      this.getCurrentWeek();
      this.selectGetOutStockBillEntityListApi();
    },
    // tabs标签页改变回调
    tabsValueChange(value) {
      if (value === "nameOne") {
        this.selectStockBillEntityListApi(); // 入库查询 接口
      } else {
        this.selectGetOutStockBillEntityListApi(); // 出库查询 接口
      }
    },
    // 入库查询-时间选择事件
    daterangeOneChange(v) {
      this.formOne.startDate = v[0];
      this.formOne.stopDate = v[1];
      this.selectStockBillEntityListApi();
    },
    // 入库查询-导出
    onExportOne() {
      if(this.formOne.storageway == undefined) this.formOne.storageway = '';
      if(this.formOne.stockId == undefined) this.formOne.stockId = '';
      window.location.href = selectStockBillExportEntityList(
        this.formOne.startDate,
        this.formOne.stopDate,
        this.formOne.productName,
        this.formOne.goodsCode,
        this.formOne.supplyId,
        this.formOne.inspectorName,
        this.formOne.billNo,
        this.formOne.storageway,
        this.formOne.stockId
      );
    },
    onShow(row) {
      this.coursePic = row.image;
      this.showModal = true;
    },
    // 出库查询-时间选择事件
    daterangeTwoChange(v) {
      this.formTwo.startDate = v[0];
      this.formTwo.stopDate = v[1];
      this.selectGetOutStockBillEntityListApi();
    },
    // 出库查询-导出
    onTwoExport(row) {
      console.log(123455);
      if(this.formTwo.storageway == undefined) this.formTwo.storageway = '';
      if(this.formTwo.stockId == undefined) this.formTwo.stockId = '';
      this.downloadFromApi(`${getOutStockBillEntityList(this.formTwo.startDate,
        this.formTwo.stopDate,
        this.formTwo.productName,
        this.formTwo.goodsCode,
        this.formTwo.supplyId,
        this.formTwo.billNo,
        encodeURI(this.formTwo.recipientDepartmentName),
        this.formTwo.storageway,
        this.formTwo.stockId)}`)
    },
    // a链接导出方法
    downloadFromApi(url) {
      let that = this
      console.log(222, url);
      axios({
        url: url,
        method: 'get',
        data: {},
        responseType: 'blob', // 后台返回的数据会被强制转为blob类型
        complete: function (xhr, data) {
       
          // 获取相关Http Response header
          var wpoInfo = {
            // 文件名
            "content-disposition": xhr.getResponseHeader('content-disposition'),
          };
          // 在这里，做想做的事。。。
        }
      }).then(res => {
        console.log();
        console.log(res);
        let reader = new FileReader();
        reader.readAsText(res.data)
        reader.onload = function (result) {
          console.log(result);
          try {
            let resData = JSON.parse(result.target.result);  // 解析对象成功，说明是json数据
            console.log(resData);
            if (resData.retCode == 2999) {
              that.$Message.error(resData.retMsg);
            }
          } catch (err) {   // 解析成对象失败，说明是正常的文件流
            let blob = new Blob([res.data], {
              type: '.xlsx'
            })
            let contentDisposition = res.headers['content-disposition']; //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
            let nameStr = contentDisposition.split(';')[1] || '';
            console.log('文件名',nameStr);
            let fileName = decodeURIComponent(nameStr.split('=')[1] || '');
            let downloadElement = document.createElement('a');
            let href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.style.display = 'none';
            downloadElement.href = href;
            downloadElement.download = fileName; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象
          }
        };
      })

    },
    // 入库查询入库查询列表------------------接口
    selectStockBillEntityListApi() {
      this.formOne.loading = true;
      return new Promise(resolve => {
        let params = {
          startDate: this.formOne.startDate, //开始时间
          stopDate: this.formOne.stopDate, //结束时间
          productName: this.formOne.productName, //物资名称
          goodsCode: this.formOne.goodsCode, //物资编码
          supplyId: this.formOne.supplyId, //供应商
          billNo: this.formOne.billNo, //订单编号
          storageway: this.formOne.storageway, //入库类型
          inspectorName: this.formOne.inspectorName, //验收员
          stockId: this.formOne.stockId, //仓库id
          current: this.pagesOne.page,
          size: this.pagesOne.pageSize
        };
        selectStockBillEntityList(params).then(res => {
          this.formOne.loading = false;
          if (res.retCode == 2000) {
            res.data.records.forEach(element => {
              if (element.supplier) {
                element.name = element.supplier.name;
              }
            });
            this.dataOne = res.data.records;
            this.pagesOne.pageTotal = res.data.total;
          } else {
            this.formOne.loading = false;
          }
          resolve();
        });
      });
    },
        // 获取所有的出库方式--------------接口
        getOutStorageWaysApi() {
      return new Promise(resolve => {
        getOutStorageWays().then(res => {
          if (res.retCode == 2000) {
            this.storagewayOutTree = res.data;
            console.log(res);
            resolve();
          }
        });
      });
    },
    		// 获取所有入库方式-------------------接口
		getInStorageWaysApi() {
			return new Promise((resolve) => {
				getInStorageWays().then((res) => {
					if (res.retCode === 2000) {
           
						this.storagewayTree = res.data
            this.storagewayTree.unshift({
              code: '',
              desc: '全部'
            })
						resolve()
					}
				})
			})
		},
    // 出库查询-导出Excel二维码_--------------------------------接口
    postApiGoodsGeneratePoStockbillIportExcelApi(billNo) {
      this.$cu.showLoading();
      return new Promise(resolve => {
        postApiGoodsGeneratePoStockbillIportExcel({ billNo: billNo }).then(
          res => {
            if (res.retCode == 2000) {
              if (res.data) {
                console.log(res.data);
                window.location.href = res.data;
              }
              this.$cu.hideLoading(0.5);
              this.$Message.success(res.retMsg);
              resolve();
            } else {
              this.$cu.hideLoading(1);
            }
          }
        );
      });
    },
    // 出库查询列表-----------------------------------接口
    selectGetOutStockBillEntityListApi() {
      this.formTwo.loading = true;
      return new Promise(resolve => {
        let params = {
          startDate: this.formTwo.startDate, //开始时间
          stopDate: this.formTwo.stopDate, //结束时间
          productName: this.formTwo.productName, //物资名称
          goodsCode: this.formTwo.goodsCode, //物资编码
          recipientDepartmentName: this.formTwo.recipientDepartmentName, //领用单位
          billNo: this.formTwo.billNo, //订单编号
          storageway: this.formTwo.storageway, //入库类型
          stockId: this.formTwo.stockId, //存储仓库
          current: this.pagesTwo.page,
          size: this.pagesTwo.pageSize
        };
        selectGetOutStockBillEntityList(params).then(res => {
          this.formTwo.loading = false;
          if (res.retCode == 2000) {
            this.dataTwo = res.data.records;
            this.pagesTwo.pageTotal = res.data.total;
          } else {
            this.formTwo.loading = false;
          }
          resolve();
        });
      });
    },
    // 获取供应商名称
    getApiGoodsHandaworkSuppliernameApi() {
      return new Promise(resolve => {
        getApiGoodsHandaworkSuppliername().then(res => {
          if (res.retCode == 2000) {
            let obj = {
              name: "全部",
              id: 0
            };
            res.data.unshift(obj);
            this.supplyTree = res.data;
          }
          resolve();
        });
      });
    },
    // 物资仓库列表----------------接口
    getBasstockListApi() {
      return new Promise(resolve => {
        let params = {
          current: 1,
          size: 1000
        };
        getBasstockList(params).then(res => {
          if (res.retCode == 2000) {
            this.storehouseTree = res.data.records;
            resolve();
          }
        });
      });
    },
    getCurrentWeek() {
      let start = moment()
        .weekday(0)
        .format("YYYY-MM-DD"); //本周一
      let end = moment()
        .weekday(6)
        .format("YYYY-MM-DD"); //本周日
      (this.formOne.startDate = start), //默认一周开始时间
        (this.formOne.stopDate = end); //默认一周结束时间
      (this.formTwo.startDate = start), (this.formTwo.stopDate = end);
      this.dateStr = [start, end];
      console.log(this.dateStr);
    }
  }
};
</script>
<style lang="less" scoped>
.topBody {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
  flex-wrap: wrap;
  .topBodyItem {
    margin-right: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    .itemSpan {
      white-space: nowrap;
      width: 80px;
      text-align: right;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85) !important;
      margin-right: 10px;
    }
    .itemImport {
      width: 200px;
    }
  }
}
// 图表上方tabs标签样式
// 当我们需要覆盖element-ui中的样式时只能通过深度作用选择器-样式穿透
::v-deep .tableInput {
  .ivu-input-number {
    .ivu-input-number-input-wrap {
      .ivu-input-number-input {
        text-align: right;
        padding-right: 26px;
      }
    }
  }
}
</style>
